<template>
  <div id="noticeDialog">
    <el-dialog
      v-model="visible"
      :close-on-click-modal="false"
      :show-close="false"
      append-to-body
      center
      destroy-on-close
      lock-scroll
      width="50%"
    >
      <template #header>
        <div style="font-size: 20px; font-weight: bold">
          {{ props.data.title }}
        </div>
      </template>
      <div
        style="
          font-size: 12px;
          color: #666;
          text-align: center;
          margin-bottom: 5px;
        "
      >
        发布时间：{{ props.data.createTime }}
      </div>
      <el-scrollbar max-height="400px">
        <div v-html="props.data.content"></div>
        <div style="width: 100%">
          <el-button
            plain
            style="display: block; margin: 0 auto"
            type="primary"
            @click="handleViewed"
          >
            我已了解
          </el-button>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { defineEmits, defineProps, ref, watch } from "vue";
import { NoticeVO } from "@/api";

const props = defineProps<{
  openFlag: boolean;
  data: NoticeVO;
}>();
const visible = ref(false);
watch(
  () => props,
  () => {
    console.log("触发了");
    visible.value = props.openFlag;
  },
  {
    deep: true,
    immediate: true,
  }
);
const emit = defineEmits(["close"]);

function handleViewed() {
  emit("close");
}
</script>

<style scoped>
#noticeDialog {
}
</style>
